<template>
	<view>
		<!-- 分享模态框 -->
		<view>
			<canvas canvas-id="poster" class="poster-canvas"></canvas>
		</view>
		<image v-if="isShowShare == true" class="share-containersss" show-menu-by-longpress src="https://rsyl.oss-cn-beijing.aliyuncs.com/cbcfe560e6884af4a7daa67c623c8710.jpg"
		 data-src="https://rsyl.oss-cn-beijing.aliyuncs.com/cbcfe560e6884af4a7daa67c623c8710.jpg" bindtap="previewImage"></image>
		<!-- <view>
			<view @click="beginCanvas" v-if="isShowShare == true">
				<image class="share-containersss" src="https://rsyl.oss-cn-beijing.aliyuncs.com/9ff1204bbb4340f3b231b7c5f9c96f7e.png" mode="widthFix"></image>
			</view>
			<mosowe-canvas-image 
				ref="mosoweCanvasComponents" 
				@canvasImage="_canvasImage" 
				:lists="lists" 
				height="460" 
				width="300"
				showPreview />
		</view> -->
		<view class="share-mask">
			<!-- <view class="share-container"> -->
				<!-- <u-image width="600rpx" height="920rpx" src="https://rsyl.oss-cn-beijing.aliyuncs.com/fcb957cad0654ee09a34dbcea9665e19.jpg" ></u-image> -->
				<!-- <view class="share-til line1">海报标题</view>
				<view class="share-price">¥123</view> -->
				<!-- <image  class="share-code" src="https://rsyl.oss-cn-beijing.aliyuncs.com/886ef5cc6e004f26bb0f11d27a9081e8.png" ></image> -->
			<!-- </view> -->
			<view class="share-bot" @click.stop>
				<!-- <view class="share-btns"> -->
					<!-- <button class="btns-list sharebtn" data-name="shareBtn" open-type="share">
						<text>分享</text>
					</button> -->
					<!-- <view class="btns-list" @click="onFriendShare">
						<image src="/static/gohome.png" class="btn" mode=""></image>
						<text>朋友圈</text>
					</view> -->
					<!-- <button class="btns-list sharebtn" @click="onSaveImg">
						<text>保存本地</text>
					</button> -->
				<!-- </view> -->
				<view class="share-cancel" @click="bitquxiao">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import DrawPoster from "@/js_sdk/u-draw-poster";
	import { upload } from "@/api/common.js";
	import mosoweCanvasImage from "@/components/mosowe-canvas-image/mosowe-canvas-image.vue"
	export default {
		components: {
			mosoweCanvasImage
		},
		data() {
			return {
				canvasUrl: '',
				lists: [
					{
						type: 'image',
						content: 'https://rsyl.oss-cn-beijing.aliyuncs.com/9ff1204bbb4340f3b231b7c5f9c96f7e.png', 
						width: 300, 
						height: 460,
						x: 0, 
						y: 0, 
					},
				],
				isShowShare: false,
				posterCover: 'https://rsyl.oss-cn-beijing.aliyuncs.com/fcb957cad0654ee09a34dbcea9665e19.jpg',
				imgUrl: '',
				haibaoimg: '',
				erweimaimg : '',
				imgUrlsss: ''
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.getImageInfo()
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage"]
			})
		},
		// 分享到微信好友
		async onShareAppMessage(res) {
			let that = this;
			if (res.from === 'button') {
				return {
					type: 2,
					path: 'https://rsyl.oss-cn-beijing.aliyuncs.com/9ff1204bbb4340f3b231b7c5f9c96f7e.png', 
					scene: 'WXSceneSession',
					imageUrl: 'https://rsyl.oss-cn-beijing.aliyuncs.com/9ff1204bbb4340f3b231b7c5f9c96f7e.png'
				};
			} 
		},
		// 分享到朋友圈
		// async onShareTimeline(res) {
		// 	const that = this;
		// 	let imgUrl = await that.createPoster();
		// 	console.log("微信分享-海报生成图片",imgUrl);
		// 	if (res.from === 'button') {
		// 		return {
		// 			title: '海报',
		// 			// path: '/pages/tabbar/home/index',
		// 			imageUrl: imgUrl
		// 		};
		// 	}
		// },
		methods: {
			previewImage(e){
				var cur=e.target.dataset.src;//获取本地一张图片链接
				console.log(cur)
				wx.previewImage({
					current: cur, //字符串，默认显示urls的第一张
					urls: [cur] // 数组，需要预览的图片链接列表
				})
			},
			beginCanvas () {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage (e) {
				console.log(e)
				this.canvasUrl = e;
			},
			getImageInfo() {
				let that = this
				uni.getImageInfo({
					  src: 'https://rsyl.oss-cn-beijing.aliyuncs.com/fcb957cad0654ee09a34dbcea9665e19.jpg',
					  success: (image) => {
						// 存储本地路径
					  that.haibaoimg = image.path;
					  this.getImageInfosss()
				   },
				});
			},
			getImageInfosss() {
				let that = this
				uni.getImageInfo({
					  src: 'https://rsyl.oss-cn-beijing.aliyuncs.com/886ef5cc6e004f26bb0f11d27a9081e8.png',
					  success: (image) => {
						// 存储本地路径
					  that.erweimaimg = image.path;
					  this.createPoster()
				   },
				});
			},
			downLoad() {
				uni.canvasToTempFilePath({// res.tempFilePath临时路径
					canvasId: 'poster',
					success: (res) => {
					  uni.saveImageToPhotosAlbum({ // 保存本地
						filePath: res.tempFilePath,
						success: (response) => {
						  console.log(response, 'success');
						  uni.showToast({
						  	title: "保存成功！",
						  	icon: "none",
						  });
						},
						fail: (response) => {
						  console.log(response, 'error');
						  wx.showModal({
						  	title: "提示",
						  	content: "需要您授权保存相册",
						  	showCancel: false,
						  	success() {
						  		wx.openSetting({
						  			success(settingdata) {
						  				if (settingdata.authSetting[
						  						'scope.writePhotosAlbum']) {
						  					
						  				} else {
						  					
						  				}
						  			}
						  		})
						  	}
						  })
						}
					  })
					}
				  })
				
			},
			// 创建海报
			createPoster() {
				const that = this;
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 300, 460);
					ctx.setFillStyle("#FFF");
					ctx.fillRect(0, 0, 300, 460);
					//商品图片下载
					uni.downloadFile({
						url: 'https://rsyl.oss-cn-beijing.aliyuncs.com/fcb957cad0654ee09a34dbcea9665e19.jpg',
						// url: that.goodsInfo.image,
						success: (res) => {
							console.log('图片下载',res)
							if (res.statusCode === 200) {
								ctx.drawImage(res.tempFilePath, 0, 0, 300, 460);
								// 二维码图片下载
								uni.downloadFile({
									url: "https://rsyl.oss-cn-beijing.aliyuncs.com/886ef5cc6e004f26bb0f11d27a9081e8.png",
									// url: that.shareCode,
									success: (res2) => {
										console.log("二维码图片下载",res2);
										if (res2.statusCode === 200) {
											// 商品标题
											// ctx.setFontSize(14);
											// ctx.setFillStyle('#222222');
											// // ctx.fillText(that.goodsInfo.goods_name, 15, 325);
											// ctx.fillText('标题', 15, 325);
											// // 商品价格
											// ctx.setFontSize(18);
											// ctx.setFillStyle('#222222');
											// // ctx.fillText('¥'+that.goodsInfo.price, 15, 368);
											// ctx.fillText('¥价格', 15, 368);
											
											// // 长按识别二维码访问
											// ctx.setFontSize(19);
											// ctx.setFillStyle('#333');
											// ctx.fillText("长按识别二维码访问", 17, textTop + 136);
											// // 平台名称
											// ctx.setFontSize(16);
											// ctx.setFillStyle('#999');
											// ctx.fillText(that.platformName, 17, textTop + 170);
					
											// 二维码
											ctx.drawImage(res2.tempFilePath, 80.5, 160, 133, 130);
											ctx.draw(true, () => {
												// canvas画布转成图片并返回图片地址
												uni.canvasToTempFilePath({
													canvasId: 'poster',
													width: 300,
													height: 460,
													success: (res) => {
														console.log("生成海报",res);
														resolve(res.tempFilePath);
														uni.canvasToTempFilePath({// res.tempFilePath临时路径
															canvasId: 'poster',
															success: (res) => {
															  that.imgUrlsss = res.tempFilePath
															}
														})
														uni.hideLoading();
														that.isShowShare = true
													},
													fail: () => {
														uni.hideLoading();
														reject();
													}
												})
											});
										} else {
											uni.hideLoading();
											console.log('海报第四步')
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									},
									fail: err => {
										console.log('海报第三步',err)
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败',
											icon: 'none'
										});
									}
								});
							} else {
								console.log('海报第er步')
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							console.log('海报第一步',err)
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					});
				});
			},
			bitquxiao() {
				this.isShowShare = false
				uni.redirectTo({
					url: '/pages/tabbar/user/post/post'
				});
			},
			// 保存图片
			async onSaveImg() {
				this.downLoad()
			},
			// 微信分享
			async onAppShare() {
			// 	const that = this;
			// 	let imgUrl = await that.createPoster();
			// 	console.log("微信分享-海报生成图片",imgUrl);
			// 	uni.hideLoading();
			// 	// let arr = [];
			// 	// arr[0] = imgUrl;
			// 	// plus.share.sendWithSystem({content:'',href:'',pictures:arr}, function(){
			// 	// 	console.log('分享成功');
			// 	// }, function(e){
			// 	// 	console.log('分享失败：'+JSON.stringify(e));
			// 	// });
			
			// 	uni.share({
			// 		provider: 'weixin',
			// 		scene: 'WXSceneSession',
			// 		type: 2,
			// 		// title: '你好呀',
			// 		// href: 'https://www.baidu.com/',
			// 		// summary: '我是图文描述',
			// 		imageUrl: imgUrl,
			// 		success: function(res) {
			// 			console.log('success:' + JSON.stringify(res));
			// 		},
			// 		fail: function(err) {
			// 			console.log('fail:' + JSON.stringify(err));
			// 		}
			// 	});
			},
			//微信朋友圈分享
			async onFriendShare(){
				
				const that = this;
				let imgUrl = await that.createPoster();
				console.log("微信分享-海报生成图片",imgUrl);
				uni.hideLoading();
				uni.share({
					provider: 'weixin',
					scene: 'WXSenceTimeline',
					type: 2,
					// title: '你好呀',
					// href: that.dataInfo.share.shareUrl,
					// summary: that.dataInfo.share.shareContent,
					// imageUrl: that.dataInfo.share.shareImg,
					imageUrl: imgUrl,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
		},
	}
</script>

<style>
	/* 分享模态框 */
	.poster-canvas {
		position: fixed;
		top: -10000rpx;
		/* top: 0rpx; */
		left: 0rpx;
		width:600rpx;
		height:920rpx;
	}
	.share-mask{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
	}
	.share-container{
		position: absolute;
		left: 75rpx;
		top: 100rpx;
		width:600rpx;
		height:920rpx;
		background: #FFFFFF;
	}
	.share-containersss {
		position: fixed;
		left: 75rpx;
		top: 100rpx;
		z-index: 99;
		width:600rpx;
		height:920rpx;
		background: #FFFFFF;
	}
	.share-til{
		width: 100%;
		margin-top:40rpx;
		padding:0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}
	.share-price{
		margin-top:50rpx;
		padding:0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}
	.share-code{
		position: absolute;
		// right: 30rpx;
		// bottom: 30rpx;
		left: 161rpx;
		top: 325rpx;
		width: 265rpx;
		height: 260rpx;
		background-color: #fff;
	}
	.share-bot{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
	}
	.share-btns{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 160rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
		
	}
	.btns-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		justify-content: center;
	}
	.btn{
		width: 60rpx;
		height: 60rpx;
	}
	.share-cancel{
		width: 100%;
		font-size: 32rpx;
		color: #222222;
		line-height: 100rpx;
		text-align: center;
	}
	.sharebtn {
		background: #fff !important;
	}
</style>